<template>
  <div>
    <el-row :gutter="16" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-people">
            <svg-icon icon-class="concurrent" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              10万用户并发平均响应时间
            </div>
            <span>
              <count-to :start-val="0" :end-val="800" :duration="100" class="card-panel-num" />ms
            </span>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-message">
            <svg-icon icon-class="handle" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              实体认证系统认证平均处理时间
            </div>
            <span>
              <count-to :start-val="0" :end-val="300" :duration="100" class="card-panel-num" />ms
            </span>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col" @click.native="show">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="scheme" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              认证方案已启动
            </div>
            <span>
              <count-to :start-val="0" :end-val="countScheme()" :duration="1" class="card-panel-num" />/12种
            </span>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-shopping">
            <svg-icon icon-class="detection" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">
              活体检测率
            </div>
            <span>
              <count-to :start-val="0" :end-val="99" :duration="1" class="card-panel-num" />%
            </span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      title="方案开启情况"
      :visible.sync="dialogVisible"
      width="400px"
    >
      <div>
        <el-tree
          :data="authScheme"
          node-key="id"
          :expand-on-click-node="true"
        >
          <span slot-scope="{ node }" class="custom-tree-node" style="margin-bottom: 10px">
            <svg-icon v-if="showOrNot(node.data.id)" icon-class="detection" />
            <span>{{ node.label }}</span>
            <span style="margin-left: 20%">
              <el-tag v-if="showOrNot(node.data.id)" :type="getType(node.data.id)" size="mini">{{msg(node.data.id)}}</el-tag>
            </span>
          </span>
        </el-tree>
      </div>
      <!--      <span slot="footer" class="dialog-footer">-->
      <!--        <el-button @click="dialogVisible = false">取消</el-button>-->
      <!--        <el-button type="primary" @click="dialogVisible = false">确定</el-button>-->
      <!--      </span>-->
    </el-dialog>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'

export default {
  components: {
    CountTo
  },
  data() {
    return {
      dialogVisible: false,
      initScheme: [0, 0, 0, 0, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1],
      authScheme: [{
        id: 1,
        label: '4/5G认证方案',
        children: [{
          id: 4,
          label: '4G认证'
        }, {
          id: 5,
          label: '5G认证'
        }, {
          id: 6,
          label: '星间认证'
        }]
      }, {
        id: 2,
        label: '4.3认证方案',
        children: [{
          id: 7,
          label: '认证方案1'
        }, {
          id: 8,
          label: '认证方案2'
        }, {
          id: 9,
          label: '认证方案3'
        }, {
          id: 10,
          label: '认证方案4'
        }, {
          id: 11,
          label: '认证方案5'
        }, {
          id: 12,
          label: '认证方案6'
        }, {
          id: 13,
          label: '认证方案7'
        }]
      }, {
        id: 3,
        label: '生物认证方案',
        children: [{
          id: 14,
          label: '指纹认证'
        }, {
          id: 15,
          label: '人脸认证'
        }]
      }]
    }
  },
  methods: {
    show() {
      this.dialogVisible = !this.dialogVisible
    },
    showOrNot(key) {
      // console.log(node)
      // const key = node.data.id
      const dis = [1, 2, 3]
      // if (node.id === 1) return false
      // console.log(id)
      return !dis.includes(key)
    },
    msg(id) {
      const status = this.initScheme[id]
      return status === 1 ? '已启动' : '未启动'
    },
    getType(id) {
      const key = this.initScheme[id]
      return key === 1 ? 'success' : 'info'
    },
    countScheme() {
      const countOccurences = (arr, value) => arr.reduce((a, v) => v === value ? a + 1 : a + 0, 0)
      return countOccurences(this.initScheme, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  //margin-top: 18px;

  .card-panel-col {
    margin-bottom: 10px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width:550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 2px;
  //margin-bottom: 5px;
}
</style>
